<template>
	<view class="detail">
		<view class='content'>
			 <ListCard :contentList="contentList" isPl="0"/>
		</view>
		<view style="padding-bottom:200rpx;">
		<template v-if="commentList && commentList.length" >
		  <view class="c_comment" v-for="item1 in commentList">
		    <!-- 一级评论 -->
		    <CommonComp
		      :data="item1"
			  @openCommon="openCommon"
			  @likeReply="likeClick"
			  @likeClick="likeClick(item1)"
			  @deleteClick="deleteClick"
		    />
		  </view>
		</template>
		</view>
		<view class="putDev">
			<view class="f24 bcolor bottom-send">
				<textarea v-model="msg" type="text" class=" send-input" placeholder-class="holder" placeholder="请说出你的想法..."></textarea>
				<view class="send-btn"   @click="pushMsg">发送</view>
			</view>
		</view>
		
		<uni-popup ref="common" type="bottom" background-color="white;" borderRadius="40rpx 40rpx 0 0" >
			
			<view class="putDev2">
				<view class="f24 bcolor bottom-send">
					<textarea v-model="replyMsg" type="text" class=" send-input" placeholder-class="holder" :placeholder="ph"></textarea>
					<view class="send-btn"   @click="reply">发送</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import ListCard from '@/components/schoolCard/card.vue'
	import config from "@/config/index.config.js";
	import iInput from '@/components/watch-login/info-input.vue';
	import CommonComp from '@/components/schoolCard/common.vue'
	export default {
		components: {
		  ListCard,
		  iInput,
		  CommonComp
		},
		created() {
		},
		data() {
			return {
				contentList:[
				],
				commentList:[],
				msg:'',
				replyMsg:"",
				commonObject:'',
				replyObject:"",
				ph:'',
				replyList:[],
				plQuery:{
					id:'',
					current:1,
					number:10
				},
				replyQuery:{
					id:'',
					current:1,
					number:10
				}
			}
		},
		onLoad(data) {
			this.contentList=[JSON.parse(data.data)]
			this.plQuery.id=this.contentList[0].id;
			this.getPLData();
		},
		methods: {
			getPLData(type='refresh'){
				if(type=='refresh'){
					this.commentList=[];
					this.plQuery.current=1;
					this.plQuery.number=10;
				}else{
					this.plQuery.current+=1;
				}
				uni.request({
					url: `${config.baseUrl}/starCityAll/circle/circleCommentQuery`,
					method: "GET",
					data: this.plQuery,
					dataType: "json",
					header: {
						"content-type": "application/json",
						"Blade-Auth":uni.getStorageSync("token")
					},
					success: (res) => {
								if(res.data.code==0){
									this.commentList=res.data.data
								}
					}
				
				})
			},
			deleteClick(item){
				var that = this;
				uni.showModal({
					content:"确定删除该条评论吗？",
					success:(res) =>{
						uni.request({
							url: `${config.baseUrl}/starCityAll/circleSon/deleCir`,
							method: "GET",
							data: {
								id:item.id
							},
							dataType: "json",
							header: {
								"content-type": "application/json",
								"Blade-Auth":uni.getStorageSync("token")
							},
							success: (res) => {
										if(res.data.code==0){
											uni.showToast({
											  title:  '删除成功',
											  icon: 'success',
											});
											that.getPLData();
										}
							}
						
						})
					}
				});
				
			},
			likeClick(item){
				var query={
					pid:item.id,
					type:item.isLike
				}
				var that=this;
				uni.request({
					url: `${config.baseUrl}/starCityAll/circleSon/circleSonLike`,
					method: "POST",
					data: query,
					dataType: "json",
					header: {
						"content-type": "application/json",
						"Blade-Auth":uni.getStorageSync("token")
					},
					success: (res) => {
								if(res.data.code==0){
									item.isLike=(item.isLike*1+1)%2;
									item.likeNum+=item.isLike==1?1:-1;
								}
					}
				
				})
			},
			openCommon(data){
				console.log(data)
				this.commonObject=[data];
				this.replyObject=data;
				this.replyMsg=""
				this.ph="回复 "+data.nichen+"：";
				this.$refs.common.open()
			},
			closeCommon(){
				this.$refs.common.close();
			},
			reply(){
				if(this.replyMsg==null||this.replyMsg==""){
					uni.showToast({
					  title:  '回复内容不能为空',
					  icon: 'error',
					});
					return;
				}
				var that = this;
				var query={
					msg:this.replyMsg,
					pid:1,
					fpid:this.replyObject.id,
					fpids:this.replyObject.fpids==0||this.replyObject.fpids==null?this.replyObject.id:this.replyObject.fpids
				}
				console.log(query)
				uni.request({
					url: `${config.baseUrl}/starCityAll/circleSon/circleSonSave`,
					method: "POST",
					data: query,
					dataType: "json",
					header: {
						"content-type": "application/json",
						"Blade-Auth":uni.getStorageSync("token")
					},
					success: (res) => {
								if(res.data.code==0){
									uni.showToast({
									  title:  '回复成功',
									  icon: 'success',
									});
									that.replyMsg="";
									that.getPLData();
								}
					}
				
				})
				this.$refs.common.close();
			},
			pushMsg(){
				if(this.msg==''||this.msg==null){
					uni.showToast({
					  title:  '评论内容不能为空',
					  icon: 'error',
					});
					return;
				}
				var that = this;
				var query={
					id:this.contentList[0].id,
					msg:this.msg,
					pid:0,
					fpid:this.contentList[0].id,
					fpids:0
				}
				console.log(query)
				uni.request({
					url: `${config.baseUrl}/starCityAll/circleSon/circleSonSave`,
					method: "POST",
					data: query,
					dataType: "json",
					header: {
						"content-type": "application/json",
						"Blade-Auth":uni.getStorageSync("token")
					},
					success: (res) => {
								if(res.data.code==0){
									that.msg=""
									uni.showToast({
									  title:  '评论发布成功',
									  icon: 'success',
									});
									that.getPLData();
								}
					}
				
				})
			}
		}
	}
</script>

<style lang="scss">
.detail{
	padding:10rpx 20rpx;
	
}
.holder{
	color: #999;
	line-height: 70rpx;;
}
.putDev2{
		width:92%;
		background-color: white;
		padding:32rpx 4%;
		.ipt{
			background-color: #F6F6F6;
		}
		.bottom-send{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.send-input{
				height:70rpx;
				line-height: 70rpx;
				flex: 1;
				background-color: #eee;
				border-radius: 20rpx;
			}
			.send-btn{
				width: 112rpx;
				height: 70rpx;
				line-height: 70rpx;
				background: $main-color;
				color: #fff;
				text-align: center;
				border-radius: 15rpx;
				&:active{
					opacity: 0.68;
				}
			}
		}
	}
.putDev{
		position: fixed;
		bottom:0;
		width:92%;
		margin-left: -20rpx;
		background-color: white;
		padding:32rpx 4%;
		.ipt{
			background-color: #F6F6F6;
		}
		.bottom-send{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.send-input{
				height:70rpx;
				line-height: 70rpx;
				flex: 1;
				background-color: #eee;
				border-radius: 20rpx;
			}
			.send-btn{
				width: 112rpx;
				height: 70rpx;
				line-height: 70rpx;
				background: $main-color;
				color: #fff;
				text-align: center;
				border-radius: 15rpx;
				&:active{
					opacity: 0.68;
				}
			}
		}
	}
</style>
